<template>
  <div class="contant-box">
    <el-container class="Home-container">
      <!-- 头部 -->
      <el-header>
        <div>
          <img src="~assets/img/logo.png" alt />
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
      </el-header>
      <!-- 页面主体区 -->
      <el-container>
        <el-aside :width="iscollapse ? '60px' : '200px'">
          <div class="fold" @click="togglefold">|||</div>
           <!-- 侧边栏菜单区 -->
              <el-menu  background-color="#545c64"  collapse-transition :router="true" :default-active="activepath"
               text-color="#fff" :collapse="iscollapse" unique-opened active-text-color="#87CEEB">
               <!-- 一级菜单 -->
                <el-submenu v-for="item1 in menulist" :key="item1.id" :index="item1.id+''">
                  <template slot="title">
                    <i :class=iconObj[item1.id]></i>
                    <span>{{item1.authName}}</span>
                  </template>
                  <!-- 二级菜单 -->
                    <el-menu-item v-for="item2 in item1.children" :key="item2.id" 
                    :index="'/'+item2.path+''" @click="saveindexstorage('/'+item2.path+'')">
                      <template slot="title">
                        <i class="el-icon-menu iconfont"></i>
                        <span>{{item2.authName}}</span>
                      </template>
                    </el-menu-item>
                </el-submenu>
              </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menulist:[],
      iconObj: {
        '125': 'iconfont el-icon-user-solid',
        '103': 'iconfont el-icon-key',
        '101': 'iconfont el-icon-s-goods',
        '102': 'iconfont el-icon-s-order',
        '145': 'iconfont el-icon-s-data'
      },
      iscollapse:false,
      activepath:''
    };
  },
  methods: {
    logout() {
      //   退出登录并清空token
      window.sessionStorage.clear();
      this.$router.push("/Login");
      this.$message('退出登录')
    },
    // 请求左侧菜单数据
    async getmenulist(){
     const{data:res}=await this.$http.get('menus')
    //  console.log(res);
     if(res.meta.status!==200){return this.$message.error(res.meta.msg)}
     this.menulist=res.data
    },
    //  是否开启折叠
    togglefold(){
      this.iscollapse=!this.iscollapse
    },
    // 使用sessionStorage保存active激活状态
    saveindexstorage(activeindex){
      window.sessionStorage.setItem("activeindex",activeindex)
    }
  },
  created(){
    // 获取左侧菜单数据
    this.getmenulist()
    // 页面创建得到sessionstorang值，赋给index高亮显示
    const activepath=window.sessionStorage.getItem('activeindex')
      this.activepath=activepath
  }
};
</script>

<style lang="less" scoped>
.contant-box {
  height: 100%;
  .Home-container {
    height: 100vh;
    .el-header {
      background-color: #373f41;
      display: flex;
      justify-content: space-between;
      padding-left: 0;
      align-items: center;
      color: #fff;
      font-size: 20px;
      > div {
        display: flex;
        align-items: center;
        img {
          height: 40px;
        }
        span {
          margin-left: 15px;
        }
      }
    }
    .el-aside {
      background-color: #454647;
      color: #333;
      text-align: center;
      //  line-height: 200px;
      .fold{
        background-color:#6aa7e4;
        cursor: pointer;
      }
      .iconfont{
        font-size: 16px;
        color: rgb(184, 189, 189);
        margin-right: 5px;
      }
      .el-submenu{
        margin-left: -50px;
        .el-menu-item{
          margin-left: 38px;
          font-size: 12px;
        }
      }
    }

    .el-main {
      background-color: #e9eef3;
      color: #333;
      text-align: center;
      //  line-height: 160px;
    }
  }
}
</style>
